<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>书城-添加图书类型</title>
		<!--导入bootstrap的css文件 -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="bootoast/bootoast.css">
        <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="bootoast/bootoast.js" type="text/javascript" charset="utf-8"></script>

		<style>
			table th{
				text-align:center;
			}
			.pagination{
				margin: 5px;
			}
		</style>
        
		<script>
			$(function() {
			    getBooks(1);

				$('#btnModify').click(function() {
					//验证
					if (!valiInput()) {
						return;
					}
					//添加
		
				});
				
				function getBooks(pn) {
                    $.ajax({
                        url:'get_books_page',
                        type:'post',
                        cache:false,
                        data:{pageNow:pn},
                        dataType: 'json',
                        success:function (rst) {
                            $('table tbody').empty();
                            $('.pagination').empty();
                            if(rst.code==1){
                                if (rst.data.books!=null && rst.data.books.length>0){
                                    for (let i = 0; i < rst.data.books.length; i++) {
                                        var book = rst.data.books[i];
                                        $(`<tr>
                                              <td>${book.bookId}</td>
                                              <td>${book.bookName}</td>
                                              <td>${book.typeName==null?'':book.typeName}</td>
                                              <td>${book.author}</td>
                                              <td>${book.publish}</td>
                                              <td class="text-right">${book.price}</td>
                                              <td class="text-right">${book.storages}</td>
                                              <td class="text-center">
                                                  <input type="button" data-toggle="modal" data-target="#editModal" value="编辑" class="btn btn-info btn-xs">
                                                  <input type="button" data-toggle="modal" data-target="#delModal" value="删除" class="btn btn-danger btn-xs">
                                              </td>
                                          </tr>`).appendTo('table tbody');
                                    }
                                }
                                //处理分页
                                $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow-1})">&laquo;</a></li>`).appendTo('.pagination');
                                for(let i = 1;i <= rst.data.page.pageCount;i++){
                                    if(i==rst.data.page.pageNow) {
                                        $(`<li class="active"><a href="#">${i}</a></li>`).appendTo('.pagination');
                                    }else {
                                        $(`<li><a href="javascript:getBooks(${i})">${i}</a></li>`).appendTo('.pagination');
                                    }
                                }
                                $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow+1})">&raquo;</a></li>`).appendTo('.pagination');
                            }else {
                                $(`<tr>
                                        <td colspan="8" class="text-center text-danger">未查寻到图书</td>
                                   </tr>`).appendTo('table tbody');
                            }
                        }
                    })
                }

			});
			//验证如果没有验证通过返回false  
			function valiInput() {
				var bookname = $('#bookname').val();
				var booktype = $('#booktype').val();
				var author = $('#author').val();
				var publish = $('#publish').val();
				var price = $('#price').val();
				var storages = $('#storages').val();
				if (bookname == '') {
					bootoast({
						message: '图书名不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (booktype == '') {
					bootoast({
						message: '图书类型不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
		
				if (author == '') {
					bootoast({
						message: '图书必须有作者',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
				if (publish == '') {
					bootoast({
						message: '出版社不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (price == '') {
					bootoast({
						message: '价格不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (parseInt(price) <= 0) {
					bootoast({
						message: '价格不能小于0',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
				if (storages == '' || parseFloat(storages) < 0) {
					bootoast({
						message: '库存不合法',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
		
			}

		</script>
	</head>
	<body>

		<ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">图书类型管理</a></li>
            <li>维护图书</li>
        </ul>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered table-hover table-condensed">
                        <thead>
                        <tr class="bg-primary">
                            <th style="width: 10%;">编号</th>
                            <th style="width: 15%">图书名称</th>
                            <th style="width: 15%;">图书类型</th>
                            <th style="width: 15%;">作者</th>
                            <th style="width: 15%;">出版社</th>
                            <th style="width: 10%;">价格</th>
                            <th style="width: 10%;">库存</th>
                            <th style="width: 15%;">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>文学类</td>
                                <td>文学类</td>
                                <td>文学类</td>
                                <td>文学类</td>
                                <td class="text-right">1</td>
                                <td class="text-right">1</td>
                                <td class="text-center">
                                    <input type="button" data-toggle="modal" data-target="#editModal" value="编辑" class="btn btn-info btn-xs">
                                    <input type="button" data-toggle="modal" data-target="#delModal" value="删除" class="btn btn-danger btn-xs">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-center">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" style="border-left: 5px royalblue solid;">修改图书</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
							<div class="form-group">
								<label for="bookname" class="col-sm-2 control-label">图书名称</label>
								<div class="col-sm-4">
									<input type="text" id="bookname" class="form-control">
								</div>
						
								<label for="booktype" class="col-sm-2 control-label">图书类型</label>
								<div class="col-sm-4">
									<select name="" id="booktype" class="form-control">
										<option value="">请选择类型</option>
										<option value="1">文科</option>
										<option value="2">理科</option>
										<option value="3">杂课</option>
										<option value="4">理论课</option>
						
									</select>
								</div>
							</div>
						
							<div class="form-group">
								<label for="author" class="col-sm-2 control-label">作者</label>
								<div class="col-sm-4">
									<input type="text" id="author" class="form-control">
									<div class="help-block">多个作者用，分割</div>
								</div>
						
						
								<label for="publish" class="col-sm-2 control-label">出版社</label>
								<div class="col-sm-4">
									<input type="text" id="publish" class="form-control">
						
								</div>
							</div>
							<div class="form-group">
								<label for="price" class="col-sm-2 control-label">价格</label>
								<div class="col-sm-4">
									<input type="number" id="price" class="form-control">
								</div>
						
						
								<label for="storages" class="col-sm-2 control-label">库存量</label>
								<div class="col-sm-4">
									<input type="number" id="storages" class="form-control">
						
								</div>
							</div>
							<div class="form-group">
								<label for="desc" class="col-sm-2 control-label">图书描述</label>
								<div class="col-sm-10">
									<textarea name="" id="desc" row="4" class="form-control"></textarea>
								</div>
							</div>
						</form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning btn-sm" id="btnModify">修改</button>
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

		<!--删除模态框-->
		<div class="modal fade" id="delModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" style="border-left: 5px royalblue solid;">温馨提示</h4>
                    </div>
                    <div class="modal-body">
                        确定删除数据吗?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger btn-sm" id="btnDel">确定</button>
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </body>
    </html>